<template>
        <p class="title">中国疫情实时监控</p>
    <div class="container">

        <div class="item" id="home"></div>
        <div class=" item con_date">
          <div>
            <p>123</p>
            <i>累计确诊</i>
          </div>
          <div>
            <p>456</p>
            <i>累计治愈</i>
          </div>
          <div>
            <p>89</p>
            <i>累计死亡</i>
          </div>
          <div>
            <p>123</p>
            <i>疑有确诊</i>
          </div>
          <div>
            <p>542</p>
            <i>无症状感染</i>
          </div>
          <div>
            <p>23</p>
            <i>境外输入</i>
          </div>
        </div>
        <div class="item" id="home1"></div>
        <div class="item" id="home2"></div>
        <div  class="item" id="main" style="width: 500px;height: 330px;"></div>
        <div class="item" id="home3"></div>
    </div>
  </template>
  
  <script>
  let echarts = require('echarts')
  import { getDefaultData } from '../servers/request.js'
  async function inteData () {
    const  data  =await getDefaultData()
    // if (data.status !== 200) { return 错愕 }
    console.log(data)
  }
  inteData ()
  export default {
  data() {
    return {
      option: {},
    };
  },
  mounted() {
    let myChart = echarts.init(document.getElementById("home"));
    let myChart1 = echarts.init(document.getElementById("home1"));
    let myChart2 = echarts.init(document.getElementById("home2"));
    let myChart3 = echarts.init(document.getElementById("home3"));
    let mymap = echarts.init(document.getElementById('main'));
    const data_list = [{name:'江苏',value:192836},{name:'安徽',value:118491},{name:'湖北',value:117036},{name:'湖南',value:110666},{name:'广东',value:109915},{name:'浙江',value:69540},{name:'福建',value:45146},{name:'山东',value:42753},{name:'河南',value:31141},{name:'四川',value:30287},{name:'河北',value:29890},{name:'江西',value:23649},{name:'黑龙江',value:20475},{name:'陕西',value:17942},{name:'贵州',value:16019},{name:'吉林',value:15441},{name:'广西',value:11875},{name:'山西',value:11077},{name:'云南',value:9238},{name:'辽宁',value:6538},{name:'甘肃',value:6128},{name:'重庆',value:5883},{name:'内蒙古',value:5605},{name:'海南',value:4596},{name:'天津',value:4244},{name:'新疆',value:4125},{name:'上海',value:3429},{name:'宁夏',value:3225},{name:'青海',value:1833},{name:'北京',value:1765}]
    const data_value_list= [192836,118491,117036,110666,109915,69540,45146,42753,31141,30287,29890,23649,20475,17942,16019,15441,11875,11077,9238,6538,6128,5883,5605,4596,4244,4125,3429,3225,1833,1765,0,]
   
    // 绘制图表
    myChart.setOption({
      title: {
        show: true,
        text: "全国累计趋势",
        textStyle: {
          fontSize: 16,
          fontWeight: "normal",
          color: "rgba(0,0,0)"
        },
      },
      legend: {
        data: ['累计确诊', '累计治愈', '累计死亡'],
        type: "plain",
        left: "40%",
        // width: "60%",
        orient: "horizontal",
        itemWidth: 20,
        itemHeight: 13,
        icon: "circle",
        lineStyle: {
          type: "solid"
        },
        textStyle: {
          color: "rgba(66, 66, 66, 1)"
        }
      },
      grid: {
        // show: true,
        left: "0%",
        width: "100%",
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'],
        name: '日期',
        min: 0,
        max: 11,
        axisTick: {
        alignWithLabel: true,
        interval: 0
        },
        axisLabel: {
          interval: 0
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '累计确诊',
          data: [820, 932, 901, 934, 1290, 1330, 1320,1500,1600],
          type: 'line',
          smooth: true,
          symbol: "none"
        },
        {
          name: '累计治愈',
          data: [720, 800, 758, 800, 1190, 1230, 1220,1300,1400],
          type: 'line',
          smooth: true,
          symbol: "none"
        },
        {
          name: '累计死亡',
          data: [2, 4, 3, 1, 1, 5, 7,5,4,8],
          type: 'line',
          smooth: true,
          symbol: "none"
        }
      ]
    });
    mymap.setOption({
      title: {
                text: '全国疫情分布',
                x: 'center',
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 20,
                  color: "rgba(0, 0, 0)"
                },
      },
      tooltip: {
          trigger: 'item',
          formatter: '名称：{a}<br/>省份：{b}<br/>数值：{c}'
      },
      // layoutCenter: ['30%', '30%'],
      dataRange: {
          min: 0,
          max: Math.max.apply(null, data_value_list),
          x: 'left',
          y: 'bottom',
          text: ['高', '低'],           // 文本，默认为数值文本
          calculable: true,
          textStyle: {
          fontSize: 10,
          fontWeight: "normal",
          color: "rgba(66, 66, 66, 1)"
        },
          inRange: {
             color: ['#FFFFFF','#0000FF'],
             symbolSize: [10, 100]
          }
      },
      series: [
          {
              name: '数据',
              type: 'map',
              mapType: 'china',
              roam: false,
              itemStyle: {
                  normal: { label: { show: true } },
                  emphasis: { label: { show: true } }
              },
              data: data_list
          }
      ]
    });
    myChart1.setOption({
      title: {
        show: true,
        text: "全国确诊省市top8",
        textStyle: {
          fontSize: 16,
          fontWeight: "normal",
          color: "rgba(0, 0, 0, 1)"
        },
      },
      series: [
        {
          name: '人数',
          data: [18880, 10000, 8000, 5660, 4990, 4500, 4400,3500],
          type: 'bar'
        }
      ],
      grid: {
        // show: true,
        left: "0%",
        width: "100%",
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['上海','北京','广东','深圳','河南','杭州','新疆','安徽'],
        name: '省份',
        min: 0,
        max: 8,
        axisTick: {
        alignWithLabel: true,
        interval: 0
        },
        axisLabel: {
          interval: 0
        }
      },
      yAxis: {},
    });
    myChart2.setOption({
      title: {
        show: true,
        text: "全国新增趋势",
        textStyle: {
          fontSize: 16,
          fontWeight: "normal",
          color: "rgba(0, 0, 0, 1)"
        },
      },
      legend: {
        data: ['新增确诊', '新增境外输入'],
        type: "plain",
        left: "40%",
        // width: "60%",
        orient: "horizontal",
        itemWidth: 20,
        itemHeight: 13,
        icon: "circle",
        lineStyle: {
          type: "solid"
        },
        textStyle: {
          color: "rgba(66, 66, 66, 1)"
        }
      },
      grid: {
        // show: true,
        left: "0%",
        width: "100%",
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'],
        name: '日期',
        min: 0,
        max: 11,
        axisTick: {
        alignWithLabel: true,
        interval: 0
        },
        axisLabel: {
          interval: 0
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '新增确诊',
          data: [820, 932, 901, 934, 1290, 1330, 1320,1500,1600],
          type: 'line',
          symbol: "none"
        },
        {
          name: '新增境外输入',
          data: [100, 150, 166, 200, 100, 110, 50,15,3,10],
          type: 'line',
          symbol: "none"
        }
      ]
    });
    myChart3.setOption({
      title: {
      text: '境外输入省市top5',
      left: 'center',
      textStyle: {
          fontSize: 16,
          fontWeight: "normal",
          color: "rgba(0, 0, 0, 1)"
        }
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        textStyle: {
          color: "rgba(66, 66, 66, 1)"
        }
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '上海' },
            { value: 735, name: '北京' },
            { value: 580, name: '深圳' },
            { value: 484, name: '香港' },
            { value: 300, name: '杭州' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
  },
  
};
</script>
  <style lang="less">
  .container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    // justify-items:center;
    // align-items: center;
  }
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    }
    .con_date {
      width: 450px;
      height: 200px;
      display: flex;
      flex-wrap: wrap;
      color: #fff;
    }
    .con_date div {
      display: flex;
      width: 33%;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      p {
        margin-bottom: 10;
        font-size: 25px;
        line-height: 25px;
        color:rgb(247, 109, 109)
      }
      i {
        font-size: 15px;
        color: rgb(15, 15, 15);
      }
    }
  </style>